vue-cli3打包优化
VueCLI3打包优化--抽离依赖包 -
项目开发中,使用了很多依赖包,如Vue 、路由管理Vue-router 、状态管理Vuex 、UI组件库( ElementUI 、Vant )、图表(echarts )等。打包构建,发现有一些包体积过大,会影响首页加载速度。如下所示:从上图的分析包中,可以将以下插件抽离:需要删除的依赖包VueCLI3自带了webpack analzer 等我继续说。
步骤:一、找到文件vue.config.js,没有则自己创建一个二、编写vue.config.js的内容三、修改路由方式,修改为hash,文件位置自己找,vuecli3中在router.ts文件中四、添加空路由找到编译好的文件夹,如果作为独立项目,直接拷贝后放到Tomcat里即可,如果是放到另外一个项目中使用,则拷贝到其它项目说完了。
项目开发中,使用了很多依赖包,如Vue 、路由管理Vue-router 、状态管理Vuex 、UI组件库( ElementUI 、Vant )、图表(echarts )等。打包构建,发现有一些包体积过大,会影响首页加载速度。如下所示:从上图的分析包中,可以将以下插件抽离:需要删除的依赖包VueCLI3自带了webpack analzer 等我继续说。
步骤:一、找到文件vue.config.js,没有则自己创建一个二、编写vue.config.js的内容三、修改路由方式,修改为hash,文件位置自己找,vuecli3中在router.ts文件中四、添加空路由找到编译好的文件夹,如果作为独立项目,直接拷贝后放到Tomcat里即可,如果是放到另外一个项目中使用,则拷贝到其它项目说完了。
package.json scripts 配置serve 命令不携带--mode 时,默认运行环境为development build 命令不携带--mode 时,默认运行环境为production 可根据当前环境写死,也可在环境配置文件中,加入打包到的文件夹名(有多个环境的时候比较方便)。vue.config.js 配置打包出来的文件不提交到git 的话说完了。
从Vue CLI 3.3 起已弃用baseUrl,请使用publicPath。默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 有帮助请点赞。
vue-cli3打包之后,文件路径多了一个斜杠 -
publicPath: './'
本篇文章所说的内容是vue-cli项目中如何缩短首屏加载时间以提高效率,代码都非常详细,有需要的朋友可以看一下。主要是首屏加载太慢。大文件定位我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解决过大的js文件。安装npm install --save-dev webpack-bundle-到此结束了?。
vue_cli3中assets和public放置文件的区别 -
解释:public/ 目录下的文件并不会被Webpack处理:它们会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这个取决于你vue.config.js中publicPath的配置,默认的是/。assets放自己写的css、js文件,后期可能会改的文件如:自己写的一些js,css样式assets目录中的文件后面会介绍。
案例环境通过vue-cli脚手架创建的vue项目在项目打包的时候遇到了背景图片路径出错的问题,经过谷歌一番,发现是在配置的时候对图片的限制大小过小造成的首先,出错点在url-loader上面。/ url-loader配置// build/webpck.base.conf.js{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url到此结束了?。
前端| Vue-cli3 中如何将 node-sass 替换为 dart-sass | Vue_百度...
目前vue-cli在默认选择sass预处理器时,也会优先使用dart-scss。更多相关信息可以参考这篇文章:Announcing Dart Sass 关于dart-sass的性能评测,可以查看:Perf Report 替换过程非常简单,只需几个步骤即可完成。如果使用了stylelint,可能需要修改校验规则。替换node-sass后需要注意的一点是,它不再支持之前等会说。
或直接可自行在 process.env 对象下定义需要使用的变量 一般约定 NODE_ENV 为环境变量名称 在项目中可以根据不同环境值进行差异化配置在vue-cli3构建的项目中,默认num run start 环境值为development , num run build 环境值为production ,当需要其他环境时,可安装cross-env 好了吧!